import React from 'react';

const RadarChart: React.FC = () => {
  // 使用相对坐标系统
  const centerX = 250;
  const centerY = 250;
  const radius = 150;

  // 生成弧形刻度线上的点（右上四分之一圆弧）
  const generateArcTicks = () => {
    const ticks = [];
    for (let i = 0; i <= 9; i++) {
      const angle = (i * 10) * (Math.PI / 180); // 从0°到90°
      const x1 = centerX + (radius + 20) * Math.cos(angle);
      const y1 = centerY - (radius + 20) * Math.sin(angle); // 注意Y轴方向
      const x2 = centerX + (radius + 35) * Math.cos(angle);
      const y2 = centerY - (radius + 35) * Math.sin(angle);

      ticks.push(
        <line
          key={i}
          x1={x1}
          y1={y1}
          x2={x2}
          y2={y2}
          stroke="#666"
          strokeWidth="1"
        />
      );

      // 添加数字标签
      if (i % 2 === 0) {
        const labelX = centerX + (radius + 45) * Math.cos(angle);
        const labelY = centerY - (radius + 45) * Math.sin(angle);
        const number = i * 10;

        ticks.push(
          <text
            key={`label-${i}`}
            x={labelX}
            y={labelY}
            textAnchor="middle"
            dominantBaseline="middle"
            fill="white"
            fontSize="12"
            fontFamily="Arial, sans-serif"
          >
            {number}
          </text>
        );
      }
    }
    return ticks;
  };

  return (
    <div style={{ width: '100%', height: '100%' }}>
      <svg
        width="100%"
        height="100%"
        viewBox="0 0 500 500"
        preserveAspectRatio="xMidYMid meet"
      >
        {/* 主圆形背景 */}
        <circle
          cx={centerX}
          cy={centerY}
          r={radius}
          fill="#1a365d"
          stroke="#4a90a4"
          strokeWidth="2"
        />

        {/* 同心圆网格 */}
        <circle
          cx={centerX}
          cy={centerY}
          r={radius / 3}
          fill="none"
          stroke="#4a90a4"
          strokeWidth="1"
        />
        <circle
          cx={centerX}
          cy={centerY}
          r={(radius * 2) / 3}
          fill="none"
          stroke="#4a90a4"
          strokeWidth="1"
        />

        {/* 坐标轴线 */}
        <line
          x1={centerX - radius}
          y1={centerY}
          x2={centerX + radius}
          y2={centerY}
          stroke="#4a90a4"
          strokeWidth="2"
        />
        <line
          x1={centerX}
          y1={centerY - radius}
          x2={centerX}
          y2={centerY + radius}
          stroke="#4a90a4"
          strokeWidth="2"
        />

        {/* 坐标轴刻度标签 */}
        <text x={centerX - radius - 15} y={centerY + 5} textAnchor="middle" fill="white" fontSize="12">-100</text>
        <text x={centerX - (radius * 2) / 3 - 15} y={centerY + 5} textAnchor="middle" fill="white" fontSize="12">-50</text>
        <text x={centerX + 5} y={centerY + 15} textAnchor="middle" fill="white" fontSize="12">0</text>
        <text x={centerX + (radius * 2) / 3 + 15} y={centerY + 5} textAnchor="middle" fill="white" fontSize="12">50</text>
        <text x={centerX + radius + 15} y={centerY + 5} textAnchor="middle" fill="white" fontSize="12">100</text>

        <text x={centerX + 5} y={centerY - radius - 5} textAnchor="middle" fill="white" fontSize="12">100</text>
        <text x={centerX + 5} y={centerY - (radius * 2) / 3 - 5} textAnchor="middle" fill="white" fontSize="12">50</text>
        <text x={centerX + 5} y={centerY + (radius * 2) / 3 + 15} textAnchor="middle" fill="white" fontSize="12">-50</text>
        <text x={centerX + 5} y={centerY + radius + 15} textAnchor="middle" fill="white" fontSize="12">-100</text>

        {/* 右上角弧形刻度（四分之一圆弧）*/}
        <path
          d={`M ${centerX + radius + 20} ${centerY} A ${radius + 20} ${radius + 20} 0 0 0 ${centerX} ${centerY - radius - 20}`}
          fill="none"
          stroke="#666"
          strokeWidth="2"
        />

        {/* 弧形刻度线 */}
        {generateArcTicks()}

        {/* 中心绿色十字标记 */}
        <line
          x1={centerX - 8}
          y1={centerY}
          x2={centerX + 8}
          y2={centerY}
          stroke="#00ff00"
          strokeWidth="3"
        />
        <line
          x1={centerX}
          y1={centerY - 8}
          x2={centerX}
          y2={centerY + 8}
          stroke="#00ff00"
          strokeWidth="3"
        />

        {/* 文字标签 */}
        <text x={centerX + 120} y={50} textAnchor="middle" fill="#333" fontSize="14" fontFamily="Arial, sans-serif">
          采动角
        </text>
        <text x={centerX + 120} y={70} textAnchor="middle" fill="#333" fontSize="16" fontWeight="bold">
          0.95°
        </text>

        <text x={centerX + 180} y={centerY + 40} textAnchor="middle" fill="#333" fontSize="14" fontFamily="Arial, sans-serif">
          仰俯角
        </text>
        <text x={centerX + 180} y={centerY + 60} textAnchor="middle" fill="#333" fontSize="16" fontWeight="bold">
          -0.98°
        </text>

        <text x={50} y={centerY + 80} textAnchor="middle" fill="#333" fontSize="14" fontFamily="Arial, sans-serif">
          垂直
        </text>
        <text x={50} y={centerY + 100} textAnchor="middle" fill="#333" fontSize="14" fontFamily="Arial, sans-serif">
          距离
        </text>
        <text x={50} y={centerY + 120} textAnchor="middle" fill="#333" fontSize="16" fontWeight="bold">
          0.3 m/m
        </text>
      </svg>
    </div>
  );
};

export default RadarChart;